<template>
  <div class="head">
    <div class="box">
            <div class="boxleft">
                <img :src="imgUrl"/>
            </div>
            <div class="boxright">
                <div class="grid-content bg-purple">
                    <el-menu 
                        :default-active="activeIndex"
                        router 
                        class="el-menu-demo" 
                        mode="horizontal" 
                        @select="handleSelect"
                        active-text-color="#111111"
                    >
                      <el-menu-item index="/">首页</el-menu-item>
                      <el-menu-item index="/about">金巢</el-menu-item>
                      <el-menu-item index="/example">案例</el-menu-item>
                          <el-submenu index="2">
                              <template slot="title" id="haoxiangni">品牌</template>
                          <el-submenu index="/product/1">
                              <template slot="title" ><el-menu-item index="/huawei">华为全屋智能</el-menu-item></template>
                              <el-menu-item index="/plan">前装方案</el-menu-item>
                              <el-menu-item index="/scene">智慧场景</el-menu-item>
                              <el-menu-item index="/experience2">预约体验</el-menu-item>
                          </el-submenu>
                          <el-submenu index="/product/2">
                              <template slot="title"><el-menu-item>上海企一照明</el-menu-item></template>
                              <el-menu-item index="2-4-1">健康照明设计</el-menu-item>
                              <el-menu-item index="2-4-2">产品服务</el-menu-item>
                              <el-menu-item index="2-4-2">案例</el-menu-item>
                          </el-submenu>
                      </el-submenu>
                      <el-menu-item index="/hall" >体验馆</el-menu-item>
                      <el-menu-item index="/news">新闻</el-menu-item>
                      <el-menu-item index="/contact">联系我们</el-menu-item>
                    </el-menu>
                </div>
          </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: location.pathname,
        imgUrl:'https://s1.ax1x.com/2022/07/20/jbVljJ.png'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
.el-menu.el-menu--horizontal{
    border-bottom: solid 0px #e6e6e6;
}
::v-deep .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
    display:none; 
}

::v-deep .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
    display:none;
}
.head{
    z-index: 99999;
    position: fixed;
    width: 100vw;
    top: 0;
}
.box{
    background-color: #ffffff; 
    display: flex;
    justify-content: space-between;
}
.boxleft{
  padding-left:2%
}
.boxright{
  padding-right:5%
}
img{
    margin-left: 40px;
    left: 20px;
    top:20px;
    width: 120px;
    height: 100%;
}
</style>